<template>

<van-nav-bar title="VueShop" />
<van-tree-select v-model:main-active-index="active" height="100vh" v-model:typeid="typeid" :items="items" @click="Active(items[active])">
  <template #content>

    <van-pull-refresh v-model="refreshing" @refresh="refresh">
      <!-- 加载列表 -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :offset="6"
          :immediate-check="false"
          finished-text="到底咯..."
          @load="load"
        >

            <van-card
              v-for="(item,key) in list"
              :price="item.price"
              :desc="item.flag_text"
              :title="item.name"
              :thumb="item.thumbs_text"
            >
              <template #num>
                <van-button size="mini" @click="ProductInfo(item.id)">查看详情</van-button>
              </template>
            </van-card>
        </van-list>
    </van-pull-refresh>
      <!-- 返回顶部 -->
      <van-back-top />
  </template>
   <!-- 下拉刷新 -->


</van-tree-select>
  

  <Tabbar />
</template>

<script setup>

// import { onBeforeMount, onMounted } from 'vue';

  const {proxy} = getCurrentInstance()

  let active = ref(0)
  let items = ref([{id:0,text:'全部分类'}])
  let product = ref([])
  let typeid = ref(0)
  const activeId = ref(1);



  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新
  onMounted(()=>{
      type()
      load()
  })
  
  //初始化分组
  const type = async ()=>{

    var result = await proxy.$POST({
      url:'/product/type'
    })
    if(result.code == 0){
      result.$fail(result.msg);
      return false
    }
    result.data.type.map((item)=>{
      items.value.push({
        id:item.id,
        text:item.name
      })
      active.value = items.id
    })
    return false
  }
  // console.log(active.value)
  const Active = async (val)=>{
      typeid.value = val.id //双向绑定直接用
      refresh()
  }

  //   //下拉刷新
  const refresh = async () =>
  {
    //可以去掉定时器
    setTimeout(() => {
      //清空查询参数
      page.value = 1
      list.value = []
      finished.value = false
      loading.value = true
      //加载数据方法
      load()
    }, 500)
    }
  // //加载数据方法
  const load = async () =>
  {
    // 上拉刷新 下拉加在
    // 判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }
    //请求发送完毕后，加载状态也就完毕了
    // loading.value = false
    //封装数据
    //发送请求
    var res = await proxy.$POST({
      url:'/product/typeList',
      params:{typeid:typeid.value,page:page.value}
    })
    //请求发送完毕后，加载状态也就完毕了
    loading.value = false//请求完毕后加载一下

    if(!res) return false

    if(res.code == 0)
    {
      //如果没有更多数据了 就说明已经加载到底了....
      finished.value = true
      return false
    }
    console.log(res.data)
    page.value++; //页数改变
    // 合并数组
    list.value = list.value.concat(res.data)

  }

  const ProductInfo = (proid) => proxy.$router.push({path:'/product/info',query:{proid:proid}})
</script>